<script setup lang="ts">
import type { ConversationsProps } from 'ant-design-x-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { Button, theme } from 'ant-design-vue'
import { Conversations } from 'ant-design-x-vue'
import { computed } from 'vue'
import ChatLogo from './ChatLogo.vue'

interface ConversationItem {
  key: string
  label: string
}

interface Props {
  conversationsItems: ConversationItem[]
  activeKey?: string
  logoSrc?: string
  logoTitle?: string
}

interface Emits {
  addConversation: []
  activeChange: [key: string]
}

const props = withDefaults(defineProps<Props>(), {
  logoSrc: './logo.svg',
  logoTitle: 'CodeWin'
})

const emit = defineEmits<Emits>()

const { token } = theme.useToken()

const styles = computed(() => {
  return {
    menu: {
      'background': `${token.value.colorBgLayout}80`,
      'width': '280px',
      'height': '100%',
      'display': 'flex',
      'flex-direction': 'column',
    },
    conversations: {
      'padding': '0 12px',
      'flex': 1,
      'overflow-y': 'auto',
    },
    addBtn: {
      background: '#1677ff0f',
      border: '1px solid #1677ff34',
      width: 'calc(100% - 24px)',
      margin: '0 12px 24px 12px',
    },
  } as const
})

const handleAddConversation = () => {
  emit('addConversation')
}

const handleActiveChange: ConversationsProps['onActiveChange'] = (key) => {
  emit('activeChange', key)
}
</script>

<template>
  <div :style="styles.menu">
    <!-- Logo -->
    <ChatLogo
      :logo-src="props.logoSrc"
      :title="props.logoTitle"
    />

    <!-- 添加会话按钮 -->
    <Button
      type="link"
      :style="styles.addBtn"
      @click="handleAddConversation"
    >
      <PlusOutlined />
      New Conversation
    </Button>

    <!-- 会话列表 -->
    <Conversations
      :items="props.conversationsItems"
      :style="styles.conversations"
      :active-key="props.activeKey"
      @active-change="handleActiveChange"
    />
  </div>
</template>